<template>
  <div class="left-nav">
    <!--<el-button size="mini" type="primary" @click="isCollapse=!isCollapse"><i class="el-icon-d-arrow-left" style="font-size: 20px"></i></el-button>-->
    <el-menu
            :collapse="isCollapse"
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      menu-trigger="true"
      :style={height:leftHeight}
      unique-opened
      router>
      <el-menu-item index="/index">
        <i class="el-icon-location-outline"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-news"></i>
          <span>景区管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/scenic/spot" v-if="userInfo.type == 1">景区列表</el-menu-item>
          <el-menu-item index="/feature/spot" v-else>景点列表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3" v-if="userInfo.type == 1">
        <template slot="title">
          <i class="el-icon-star-on"></i>
          <span>账号管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/account/list/qian">前台账号</el-menu-item>
          <el-menu-item index="/account/list/hou">后台账号</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-picture-outline"></i>
          <span>设备管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/equipment/list">设备列表</el-menu-item>
          <el-menu-item index="/equipmentfen/list">设备分类</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="/crowd/analysis">
        <i class="el-icon-setting"></i>
        <span slot="title">人群分析</span>
      </el-menu-item>
      <el-menu-item index="/upload/pdf" v-if="userInfo.type == 1">
        <i class="el-icon-upload"></i>
        <span slot="title">上传PDF</span>
      </el-menu-item>
      <el-menu-item index="">
        <i class="el-icon-more"></i>
        <span slot="title" @click="dialogFormVisible = true">
                    <!--<a style="color: #000;" href="http://yueshengkj.com" rel="external nofollow" target="_blank">-->
                        数据展示
          <!--</a>-->
                </span>
      </el-menu-item>
    </el-menu>
    <el-dialog title="请选择时间段" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="选择时间段" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.checkTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="form.pickerOptions"
            value-format="yyyy-MM-dd"
            @change="changeDate"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="toSite">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  export default {
    name: 'leftNav',
    data() {
      return {
          isCollapse:false,
        leftHeight: '',
        TreeData: [],
        userInfo: {},
        dialogFormVisible: false,
        form: {
          pickerOptions: {
            shortcuts: [
              {
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              },
            ],
            disabledDate(time){
              let _now = Date.now();
              return time.getTime() > _now;
            }
          },
          checkTime: ''
        },
        formLabelWidth: '120px',
        dateArr: []
      }
    },
    created() {
      // this.getTreeList();
    },
    mounted() {
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
      this.leftHeight = (document.documentElement.clientHeight - 65) + 'px';
    },
    methods: {
      getTreeList() {
        this.$http.get('api/admin/auth/navTree')
          .then((result) => {
            this.TreeData = result.data;
          })
          .catch((err) => {
            this.$message.warning(err.data.msg || "数据异常，请重试");
          })
      },
      changeDate(value){
        this.dateArr = value;
      },
      toSite() {
        if(this.dateArr.length > 0){
          var toUrl = "http://www.yueshengkj.com/?param=" + this.dateArr;
          // var toUrl = "http://localhost:63342/tourism-index/login.html?param=" + this.dateArr;
          window.open(toUrl);
        } else {
          this.$message.warning("请选择时间段");
        }

      }
    }
  };
</script>

<style scoped lang="less">
  .left-nav {
    .el-button--mini, .el-button--mini.is-round{
      padding: 4px;
    }
    .icon {
      vertical-align: middle;
      /*margin-right: 5px;*/
      width: 24px;
      /*text-align: center;*/
      font-size: 18px;
    }
  }

  a {
    text-decoraction: none;
  }
</style>
<style>
  .el-dialog{
    width: 40% !important;
  }
  .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner{
    width: 92% !important;
  }
</style>